<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
    <div v-if="showMain" >
      <!--卡片化-->
      <el-tabs>
        <el-tab-pane label="服务器监控项">
            <!--服务器监控项内部展示数据-->
          <div>
            <el-row>
              <el-col :span="8" offset="2" align="center">
                <label>当前展示的设备为：</label>
                <el-select v-model="currentHost" placeholder="选择展示基本信息的设备" >
                  <el-option
                      v-for="item in hosts"
                      :key="item.hostid"
                      :label="item.host"
                      :value="item.hostid">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="4" >
                <el-button type="primary" icon="el-icon-search" @click="getBasicItem()">搜索</el-button>
              </el-col>
              <br>
              <br>
              <br>
            </el-row>
          </div>
          <div >
            <el-tabs :tab-position="tabPosition" v-model="activeName" style="height: 450px;">
              <el-tab-pane label="进程数">
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content monitors">
                      <div class="showChart" id="number_of_processes"></div>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="磁盘容量">
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content monitors">
                      <div class="showChart" id="disk_capacity"></div>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="CPU负载率"  >
                <div class="nowEcharts" id="nowEcharts"><!---->
                  <el-row>
                    <el-col :span="8">
                      <div class="grid-content monitors">
                        <div class="showChart" id="cpu_load"></div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="CPU使用率">
                <el-row>
                  <el-col :span="8" >
                    <div class="grid-content monitors">
                      <div class="showChart" id="cpu_usage"></div>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="设备中断次数">
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content monitors">
                      <div class="showChart" id="interrupts"></div>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="网络冲突数量">
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content monitors">
                      <div class="showChart" id="net_collisions"></div>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="接口上传流量统计">
                <el-row>
                  <el-col :span="8">
                    <div class="grid-content monitors">
                      <div class="showChart" id="traffic_statistics"></div>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>
        <el-tab-pane label="SNMP监控项">配置管理</el-tab-pane>
      </el-tabs>
    </div >
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "BasicMonitoringEquipment2",
  data() {
    return {
      hosts:[],//当前在线主机
      currentHost: '10488', // 当前选择的主机
      showMain: true,
      activeName: 'first',
      tabPosition: 'left'
    }
  },
  mounted() {
    //this.drawCPULoad();//绘制CPU负载饼状图
    this.getHostList();//获取当前在线主机列表
    this.getBasicItem(); // 页面初始化时绘制图表
    //this.drawTest();
  },
  watch:{

  },
  methods: {
    //获取在线主机
    getHostList()
    {
      const _this=this;
      axios({
        method: 'get',
        url: '/demo/get_all_online_host.action'
      }).then(function (response){
        let resultList = response.data.content.result
        console.log("resultList:"+resultList)
        _this.hosts= resultList
      }).catch(function (error){
        console.log(error)
      })
    },
    //发送数据请求
    getBasicItem()
    {
      this.loadAllCPULoadData(); // 绘制CPU负载
      this.loadAllCPUUsage();    // 绘制CPU使用率图
      this.loadAllProcess();     // 加载所有的进程
      this.loadAllDiskCapacity();// 绘制磁盘容量
      this.loadAllTrafficStatistics(); // 绘制网络接口流量上传统计
      this.loadAllNetCollisions(); // 加载所有的网络冲突数
      this.loadAllInterrupts();  // 加载所有的冲突数
    },
    // 加载所有的CPU负载数据
    loadAllCPULoadData(){
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: "Load average (1m avg)" // 参数名
        }
      }).then((res) => {
        var result = res.data.content.result;
        console.log(result);
        console.log(res.data.content.result);
       // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("cpu_load"));

          var cpuLoadData = [];
          var now = +new Date();
          var oneDay = 1000;
          // var oneDay = 24 * 3600 * 1000;
          var value = Math.abs(Math.random() * 5);

          for (var i = 0; i < result.length; i++) {
            now = new Date(+now + oneDay);
            value = result[i].value;
            var time = result[i].clock;

            var tempData = {
              name: now.toString(),
              value: [
                time,
                Math.round(value)
              ]
            };
            cpuLoadData.push(tempData);
          }

          var cpuLoadDataLength = result.length-1;

          // 指定图表的配置项和数据
          let option = {
            title: {
              text: 'CPU负载'
            },
            tooltip: {
              trigger: 'axis',//鼠标浮现时出现数据
              // 规定参数的格式
              formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
               // return params.result.clock.toString()+'</br'+'value：'+params.result.value.toString();
              },
              axisPointer: {
                animation: true
              }
            },
            //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
            toolbox: {
              show: true,
              //toolbox的配置项
              feature: {
                //辅助线的开关
                mark: { show: true },
                //数据视图
                dataView: {
                  show: true,
                  readOnly: false
                },
                //动态类型切换
                magicType: {
                  show: true,
                  //line为折线图，bar为柱状图
                  type: ['line', 'bar']
                },
                //配置项还原
                restore: { show: true },
                //将图标保存为图片
                saveAsImage: { show: true }
              }
            },
            xAxis: {
              type: 'time',
              splitLine: {
                show: true
              },
              triggerEvent: true
            },
            yAxis: {
              type: 'value',
              boundaryGap: [0, '100%'],
              splitLine: {
                show: true
              }
            },
            series: [{
              name: '数据记录',
              type: 'line',
              showSymbol: true,
              hoverAnimation: true,
              markPoint: {
                data: [
                  [{
                    symbol: 'none',
                    x: '95%',
                    yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                  }, {
                    symbol: 'circle',
                    label: {
                      normal: {
                        position: 'start',
                        formatter: '实时数据\n{c}'
                      }
                    },
                    name: '实时数据',
                    value: cpuLoadData[cpuLoadDataLength].value[1],
                    xAxis: cpuLoadData[cpuLoadDataLength].value[0],
                    yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                  }]
                ]
              },
              data: cpuLoadData
            }]
          };

          // 使用刚指定的配置项和数据显示图表。
          // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
          myChart.clear();
          myChart.setOption(option,true);
        })
    //     // 基于准备好的dom，初始化echarts实例
    //     let myChart = this.$echarts.init(document.getElementById("cpu_load"));
    //     var cpuLoadData = [];//data
    //     var now = new Date();//var now = +new Date();
    //     var value = Math.random() * 1000;
    //     function randomData(){
    //       for (var i = 0; i < result.length; i++) {
    //         now = new Date(+now + oneDay);
    //         value = result[i].value;
    //         var time = result[i].clock;
    //         var tempData = {
    //           name: now.toString(),
    //           value: [
    //             time,
    //             Math.round(value)
    //           ]
    //         };
    //         cpuLoadData.push(tempData);
    //       }
    //     }
    //     //var oneDay = 1000;
    //     // var oneDay = 24 * 3600 * 1000;
    //     var value = Math.abs(Math.random() * 5);
    //     var cpuLoadDataLength = result.length-1;
    //
    //     // 指定图表的配置项和数据
    //     let option = {
    //       title: {
    //         text: 'CPU负载'
    //       },
    //       tooltip: {
    //         trigger: 'axis',//鼠标浮现时出现数据
    //         // 规定参数的格式
    //         formatter: function (params) {
    //           params = params[0];
    //           var date = new Date(params.name);
    //           return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
    //         },
    //         axisPointer: {
    //           animation: false//animation: true
    //         }
    //       },
    //       //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
    //       toolbox: {
    //         show: true,
    //         //toolbox的配置项
    //         feature: {
    //           //辅助线的开关
    //           mark: { show: true },
    //           //数据视图
    //           dataView: {
    //             show: true,
    //             readOnly: false
    //           },
    //           //动态类型切换
    //           magicType: {
    //             show: true,
    //             //line为折线图，bar为柱状图
    //             type: ['line', 'bar']
    //           },
    //           //配置项还原
    //           restore: { show: true },
    //           //将图标保存为图片
    //           saveAsImage: { show: true }
    //         }
    //       },
    //       xAxis: {
    //         type: 'time',
    //         splitLine: {
    //           show: false//show: true
    //         },
    //         triggerEvent: true
    //       },
    //       yAxis: {
    //         type: 'value',
    //         boundaryGap: [0, '100%'],
    //         splitLine: {
    //           show: false//show: true
    //         }
    //       },
    //       series: [{
    //         name: '数据记录',
    //         type: 'line',
    //         // showSymbol: true,
    //         // hoverAnimation: true,
    //         showSymbol: false,
    //         hoverAnimation: false,
    //         cpuLoadData:cpuLoadData,
    //         markPoint: {
    //           data: [
    //             [{
    //               symbol: 'none',
    //               x: '95%',
    //               yAxis: cpuLoadData[cpuLoadDataLength].value[1]
    //             }, {
    //               symbol: 'circle',
    //               label: {
    //                 normal: {
    //                   position: 'start',
    //                   formatter: '实时数据\n{c}'
    //                 }
    //               },
    //               name: '实时数据',
    //               value: cpuLoadData[cpuLoadDataLength].value[1],
    //               xAxis: cpuLoadData[cpuLoadDataLength].value[0],
    //               yAxis: cpuLoadData[cpuLoadDataLength].value[1]
    //             }]
    //           ]
    //         },
    //         data: cpuLoadData
    //       }]
    //     };
    //     setInterval(function() {
    //       // cpuLoadData.push(randomData());
    //       myChart.setOption(option);
    //     }, 1000);
    //     // 使用刚指定的配置项和数据显示图表。
    //     // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
    //     myChart.clear();
    //     myChart.setOption(option,true);
    //   })
     },
    // 加载所有的CPU使用率
    loadAllCPUUsage(){
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: "CPU utilization" // 参数名
        }
      }).then((res) => {
        var result = res.data.content.result;

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("cpu_usage"));
        var cpuLoadData = [];
        var now = +new Date();
        var oneDay = 1000;
        // var oneDay = 24 * 3600 * 1000;
        var value = Math.abs(Math.random() * 5);

        for (var i = 0; i < result.length; i++) {
          now = new Date(+now + oneDay);
          value = result[i].value;
          var time = result[i].clock;

          var tempData = {
            name: now.toString(),
            value: [
              time,
              Math.round(value)
            ]
          };
          cpuLoadData.push(tempData);
        }

        var cpuLoadDataLength = result.length-1;

        // 指定图表的配置项和数据
        let option = {
          title: {
            text: 'CPU使用率'
          },
          tooltip: {
            trigger: 'axis',
            // 规定参数的格式
            formatter: function (params) {
              params = params[0];
              var date = new Date(params.name);
              return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
              animation: true
            }
          },
          //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
          toolbox: {
            show: true,
            //toolbox的配置项
            feature: {
              //辅助线的开关
              mark: { show: true },
              //数据视图
              dataView: {
                show: true,
                readOnly: false
              },
              //动态类型切换
              magicType: {
                show: true,
                //line为折线图，bar为柱状图
                type: ['line', 'bar']
              },
              //配置项还原
              restore: { show: true },
              //将图标保存为图片
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: true
            },
            triggerEvent: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: true
            }
          },
          series: [{
            name: '数据记录',
            type: 'line',
            showSymbol: true,
            hoverAnimation: true,
            markPoint: {
              data: [
                [{
                  symbol: 'none',
                  x: '95%',
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '实时数据\n{c}'
                    }
                  },
                  name: '实时数据',
                  value: cpuLoadData[cpuLoadDataLength].value[1],
                  xAxis: cpuLoadData[cpuLoadDataLength].value[0],
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }]
              ]
            },
            data: cpuLoadData
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
        myChart.clear();
        myChart.setOption(option,true);
      })
    },
    // 加载进程数量
    loadAllProcess(){
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: "Number of processes" // 参数名
        }
      }).then((res) => {
        var result = res.data.content.result;

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("number_of_processes"));

        var cpuLoadData = [];
        var now = +new Date();
        var oneDay = 1000;
        // var oneDay = 24 * 3600 * 1000;
        var value = Math.abs(Math.random() * 5);

        for (var i = 0; i < result.length; i++) {
          now = new Date(+now + oneDay);
          value = result[i].value;
          var time = result[i].clock;

          var tempData = {
            name: now.toString(),
            value: [
              time,
              Math.round(value)
            ]
          };
          cpuLoadData.push(tempData);
        }

        var cpuLoadDataLength = result.length-1;

        // 指定图表的配置项和数据
        let option = {
          title: {
            text: '进程数量',


          },
          tooltip: {
            trigger: 'axis',
            // 规定参数的格式
            formatter: function (params) {
              params = params[0];
              var date = new Date(params.name);
              return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
              animation: true
            }
          },
          //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
          toolbox: {
            show: true,
            //toolbox的配置项
            feature: {
              //辅助线的开关
              mark: { show: true },
              //数据视图
              dataView: {
                show: true,
                readOnly: false
              },
              //动态类型切换
              magicType: {
                show: true,
                //line为折线图，bar为柱状图
                type: ['line', 'bar']
              },
              //配置项还原
              restore: { show: true },
              //将图标保存为图片
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: true
            },
            triggerEvent: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: true
            }
          },
          series: [{
            name: '数据记录',
            type: 'line',
            showSymbol: true,
            hoverAnimation: true,
            markPoint: {
              data: [
                [{
                  symbol: 'none',
                  x: '95%',
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '实时数据\n{c}'
                    }
                  },
                  name: '实时数据',
                  value: cpuLoadData[cpuLoadDataLength].value[1],
                  xAxis: cpuLoadData[cpuLoadDataLength].value[0],
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }]
              ]
            },
            data: cpuLoadData
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
        myChart.clear();
        myChart.setOption(option,true);
      })
    },
    // 加载磁盘容量
    loadAllDiskCapacity(){
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: "Free swap space in %" // 参数名
        }
      }).then((res) => {
        var result = res.data.content.result;

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("disk_capacity"));

        var cpuLoadData = [];
        var now = +new Date();
        var oneDay = 1000;
        // var oneDay = 24 * 3600 * 1000;
        var value = Math.abs(Math.random() * 5);

        for (var i = 0; i < result.length; i++) {
          now = new Date(+now + oneDay);
          value = result[i].value;
          var time = result[i].clock;

          var tempData = {
            name: now.toString(),
            value: [
              time,
              Math.round(value)
            ]
          };
          cpuLoadData.push(tempData);
        }

        var cpuLoadDataLength = result.length-1;

        // 指定图表的配置项和数据
        let option = {
          title: {
            text: '磁盘容量'
          },
          tooltip: {
            trigger: 'axis',
            // 规定参数的格式
            formatter: function (params) {
              params = params[0];
              var date = new Date(params.name);
              return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
              animation: true
            }
          },
          //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
          toolbox: {
            show: true,
            //toolbox的配置项
            feature: {
              //辅助线的开关
              mark: { show: true },
              //数据视图
              dataView: {
                show: true,
                readOnly: false
              },
              //动态类型切换
              magicType: {
                show: true,
                //line为折线图，bar为柱状图
                type: ['line', 'bar']
              },
              //配置项还原
              restore: { show: true },
              //将图标保存为图片
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: true
            },
            triggerEvent: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: true
            }
          },
          series: [{
            name: '数据记录',
            type: 'line',
            showSymbol: true,
            hoverAnimation: true,
            markPoint: {
              data: [
                [{
                  symbol: 'none',
                  x: '95%',
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '实时数据\n{c}'
                    }
                  },
                  name: '实时数据',
                  value: cpuLoadData[cpuLoadDataLength].value[1],
                  xAxis: cpuLoadData[cpuLoadDataLength].value[0],
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }]
              ]
            },
            data: cpuLoadData
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
        myChart.clear();
        myChart.setOption(option,true);
      })
    },
    // 加载网络接口流量上传统计
    loadAllTrafficStatistics(){
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: "Interface eth0: Bits sent" // 参数名
        }
      }).then((res) => {
        var result = res.data.content.result;

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("traffic_statistics"));
        var cpuLoadData = [];
        var now = +new Date();
        var oneDay = 1000;
        // var oneDay = 24 * 3600 * 1000;
        var value = Math.abs(Math.random() * 5);

        for (var i = 0; i < result.length; i++) {
          now = new Date(+now + oneDay);
          value = result[i].value;
          var time = result[i].clock;

          var tempData = {
            name: now.toString(),
            value: [
              time,
              Math.round(value)
            ]
          };
          cpuLoadData.push(tempData);
        }

        var cpuLoadDataLength = result.length-1;

        // 指定图表的配置项和数据
        let option = {
          title: {
            text: '网络接口流量上传统计'
          },
          tooltip: {
            trigger: 'axis',
            // 规定参数的格式
            formatter: function (params) {
              params = params[0];
              var date = new Date(params.name);
              return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
              animation: true
            }
          },
          //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
          toolbox: {
            show: true,
            //toolbox的配置项
            feature: {
              //辅助线的开关
              mark: { show: true },
              //数据视图
              dataView: {
                show: true,
                readOnly: false
              },
              //动态类型切换
              magicType: {
                show: true,
                //line为折线图，bar为柱状图
                type: ['line', 'bar']
              },
              //配置项还原
              restore: { show: true },
              //将图标保存为图片
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: true
            },
            triggerEvent: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: true
            }
          },
          series: [{
            name: '数据记录',
            type: 'line',
            showSymbol: true,
            hoverAnimation: true,
            markPoint: {
              data: [
                [{
                  symbol: 'none',
                  x: '95%',
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '实时数据\n{c}'
                    }
                  },
                  name: '实时数据',
                  value: cpuLoadData[cpuLoadDataLength].value[1],
                  xAxis: cpuLoadData[cpuLoadDataLength].value[0],
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }]
              ]
            },
            data: cpuLoadData
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
        myChart.clear();
        myChart.setOption(option,true);
      })
    },
    // 加载网络冲突数
    loadAllNetCollisions(){
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: "net.if.collisions" // 参数名
        }
      }).then((res) => {
        var result = res.data.content.result;

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("net_collisions"));
        var cpuLoadData = [];
        var now = +new Date();
        var oneDay = 1000;
        // var oneDay = 24 * 3600 * 1000;
        var value = Math.abs(Math.random() * 5);

        for (var i = 0; i < result.length; i++) {
          now = new Date(+now + oneDay);
          value = result[i].value;
          var time = result[i].clock;

          var tempData = {
            name: now.toString(),
            value: [
              time,
              Math.round(value)
            ]
          };
          cpuLoadData.push(tempData);
        }

        var cpuLoadDataLength = result.length-1;

        // 指定图表的配置项和数据
        let option = {
          title: {
            text: '网络冲突数'
          },
          tooltip: {
            trigger: 'axis',
            // 规定参数的格式
            formatter: function (params) {
              params = params[0];
              var date = new Date(params.name);
              return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
              animation: true
            }
          },
          //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
          toolbox: {
            show: true,
            //toolbox的配置项
            feature: {
              //辅助线的开关
              mark: { show: true },
              //数据视图
              dataView: {
                show: true,
                readOnly: false
              },
              //动态类型切换
              magicType: {
                show: true,
                //line为折线图，bar为柱状图
                type: ['line', 'bar']
              },
              //配置项还原
              restore: { show: true },
              //将图标保存为图片
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: true
            },
            triggerEvent: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: true
            }
          },
          series: [{
            name: '数据记录',
            type: 'line',
            showSymbol: true,
            hoverAnimation: true,
            markPoint: {
              data: [
                [{
                  symbol: 'none',
                  x: '95%',
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '实时数据\n{c}'
                    }
                  },
                  name: '实时数据',
                  value: cpuLoadData[cpuLoadDataLength].value[1],
                  xAxis: cpuLoadData[cpuLoadDataLength].value[0],
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }]
              ]
            },
            data: cpuLoadData
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
        myChart.clear();
        myChart.setOption(option,true);
      })
    },
    // 加载设备中断数
    loadAllInterrupts(){
      const _this = this;
      axios({
        methods: 'get',
        url: '/basical/agentItem.action',
        params: {
          hostId: _this.currentHost, // hostId
          itemName: "Interrupts per second" // 参数名
        }
      }).then((res) => {
        var result = res.data.content.result;

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("interrupts"));
        var cpuLoadData = [];
        var now = +new Date();
        var oneDay = 1000;
        // var oneDay = 24 * 3600 * 1000;
        var value = Math.abs(Math.random() * 5);

        for (var i = 0; i < result.length; i++) {
          now = new Date(+now + oneDay);
          value = result[i].value;
          var time = result[i].clock;

          var tempData = {
            name: now.toString(),
            value: [
              time,
              Math.round(value)
            ]
          };
          cpuLoadData.push(tempData);
        }

        var cpuLoadDataLength = result.length-1;

        // 指定图表的配置项和数据
        let option = {
          title: {
            text: '设备中断数'
          },
          tooltip: {
            trigger: 'axis',
            // 规定参数的格式
            formatter: function (params) {
              params = params[0];
              var date = new Date(params.name);
              return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
              animation: true
            }
          },
          //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
          toolbox: {
            show: true,
            //toolbox的配置项
            feature: {
              //辅助线的开关
              mark: { show: true },
              //数据视图
              dataView: {
                show: true,
                readOnly: false
              },
              //动态类型切换
              magicType: {
                show: true,
                //line为折线图，bar为柱状图
                type: ['line', 'bar']
              },
              //配置项还原
              restore: { show: true },
              //将图标保存为图片
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: true
            },
            triggerEvent: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: true
            }
          },
          series: [{
            name: '数据记录',
            type: 'line',
            showSymbol: true,
            hoverAnimation: true,
            markPoint: {
              data: [
                [{
                  symbol: 'none',
                  x: '95%',
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '实时数据\n{c}'
                    }
                  },
                  name: '实时数据',
                  value: cpuLoadData[cpuLoadDataLength].value[1],
                  xAxis: cpuLoadData[cpuLoadDataLength].value[0],
                  yAxis: cpuLoadData[cpuLoadDataLength].value[1]
                }]
              ]
            },
            data: cpuLoadData
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
        myChart.clear();
        myChart.setOption(option,true);
      })
    },

  }
}
</script>
<style scoped>
#cpu_load{
  width: 1000px;
  height: 450px;
  float: left;
}
#cpu_usage{
  width: 1000px;
  height: 450px;
  float: left;
}
#number_of_processes{
  width: 1000px;
  height: 450px;
  float: left;
}
#disk_capacity{
  width: 1000px;
  height: 450px;
  float: left;
}
#interrupts{
  width: 1000px;
  height: 450px;
  float: left;
}
#net_collisions{
  width: 1000px;
  height: 450px;
  float: left;
}
#traffic_statistics{
  width: 1000px;
  height: 450px;
  float: left;
}
.monitors{
  width: 100%;
  height: 450px;
}

.showChart{
  height: 400px;
  margin: 8px;
  background-color: #d3e0f3;
}
/*.nowEcharts { width: 100%; height: 300px; margin-bottom: 0.3rem;}*/
.nowEcharts {
  width: 100%;
  height: 450px;
  margin-bottom: 0.3rem;
}
</style>